import React, { Component } from 'react'

export default class CommentInput extends Component {
  state = {
    content:'',
  }
  updateContent =(e)=>{
  const value = e.target.value.trim()
  //  限制字数
   if(value.length <=100){
  this.setState({
    content:value
  })
}
  }
  // 点击事件
handelClick=()=>{
  // 需要把输入的内容提交给App组件区做添加
  if(this.state.content){
    this.props.addComment(this.state.content)
    // 清空输入框中的数据
    this.setState({content:''})
  }
  }
  render() {
    return (
      <>
      <h3 className="comm-head">评论</h3>
      <div className="comm-input">
        <textarea placeholder="爱发评论的人，运气都很棒"  value ={this.state.content} onChange = {this.updateContent}>
        </textarea>
        <div className="foot">
            <div className="word">{this.state.content.length}/100</div>
            <div className="btn" onClick={this.handelClick}>发表评论</div>
        </div>
      </div>
    </>
    )
  }
}
